<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 作者管理</el-breadcrumb-item>
				<el-breadcrumb-item>查询所有作者</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<el-col :span="5">
				<el-input type="text" placeholder="请输入作者笔名" v-model="example.name" maxlength="10" show-word-limit>
				</el-input>
			</el-col>
			<el-col :span="5">
				<el-input type="text" placeholder="请输入作者ID" v-model="example.id" maxlength="8" show-word-limit>
				</el-input>
			</el-col>
			<el-col :span="5">
				<el-input type="text" placeholder="请输入作者电话" v-model="example.tel" maxlength="11" show-word-limit>
				</el-input>
			</el-col>
			<el-col :span="5">
				<input type="radio" value="0" v-model="example.status" name="status" />全部
				<input type="radio" value="1" v-model="example.status" name="status" />签约作者
				<input type="radio" value="2" v-model="example.status" name="status" />未签约
			</el-col>
			<template>
				<el-table :data="Authors" style="width: 100%">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-form-item label="稿酬">
									<span>{{ props.row.payment }}</span>
								</el-form-item>
								<el-form-item label="邮箱">
									<span>{{ props.row.email }}</span>
								</el-form-item>
								<el-form-item label="性别">
									<span>{{ props.row.sex }}</span>
								</el-form-item>
								<el-form-item label="申请时间">
									<span>{{ props.row.author_time }}</span>
								</el-form-item>
								<el-form-item label="QQ号">
									<span>{{ props.row.qq }}</span>
								</el-form-item>
								<el-form-item label="真实姓名">
									<span>{{ props.row.name }}</span>
								</el-form-item>
								<el-form-item label="出生年月">
									<span>{{ props.row.birthday }}</span>
								</el-form-item>
								<el-form-item label="家庭住址">
									<span>{{ props.row.address }}</span>
								</el-form-item>
								<el-form-item label="身份证号">
									<span>{{ props.row.idCard }}</span>
								</el-form-item>
								<el-form-item label="银行卡号">
									<span>{{ props.row.bankCard }}</span>
								</el-form-item>
								<el-form-item label="等级">
									<span>{{ props.row.degree }}</span>
								</el-form-item>
								<el-form-item label="个人简介">
									<span>{{ props.row.description }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column label="作者 ID" prop="authorId">
					</el-table-column>
					<el-table-column label="所属编辑ID" prop="editorId">
					</el-table-column>
					<el-table-column label="笔名" prop="penName">
					</el-table-column>
					<el-table-column label="状态" prop="status">
					</el-table-column>
					<el-table-column label="电话" prop="authorTel">
					</el-table-column>
				</el-table>
			</template>

			<el-pagination background :current-page="example.pageNum" :page-size="example.pageSize" @current-change="changePage"
			 layout="prev, pager, next" :total="500">
			</el-pagination>
		</div>
	</div>
</template>


<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				Authors: [],
				text: '',
				example: {
					pageNum: 0,
					pageSize: 5,
					total: 0,
					name: '',
					id: '',
					tel: '',
					status: 0,
				},
				total: 0,
			}
		},
		methods: {
			select: function() {
				var _this = this;
				console.log(_this.example);
				$.ajax({
					url: "http://localhost/manager/author",
					type: "get",
					data: _this.example,
					contentType: "application/json;charset=utf-8",
					success: function(data) {
						console.log(data);
						_this.Authors = data.data.records;
					}
				});
			},
			changePage: function(va) {
				console.log(va);
				var _this = this;
				_this.example.pageNum = va;
				_this.select();
			}
		},
		created() {
			this.select();
		},
		watch: {
			example: {
				//深度监听 监听对象中属性的变化以及集合中对象的变化
				handler: function() {
					this.select();
				},
				deep: true
			}
		}
	}
</script>

<style>
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>
